<!-- components/StatCard.vue -->
<template>
  <el-card shadow="hover">
    <div class="stat-card">
      <el-icon :size="40" class="icon">
        <slot name="icon">
          <component :is="icon" />
        </slot>
      </el-icon>
      <div class="content">
        <div class="title">{{ title }}</div>
        <div v-if="!loading" class="value">{{ value }}</div>
        <el-skeleton v-else :rows="1" animated />
      </div>
    </div>
  </el-card>
</template>

<script setup>
defineProps({
  title: String,
  value: [Number, String],
  loading: Boolean,
  icon: {
    type: String,
    default: 'TrendCharts'
  }
})
</script>

<style scoped>
.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
}
.icon {
  color: var(--el-color-primary);
}
.title {
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
.value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 5px;
}
</style>